<template>
  <div>
    <div style="margin-top:40px">
      <el-tooltip class="item" effect="dark" content="选择模板" placement="top">
        <el-button type="warning" @click="setTemplate"><i class="el-icon-tickets"></i>报告模板：{{ templateName }}
        </el-button>
      </el-tooltip>
      <el-button v-if="bgFile==0" type="primary" @click="download">生成报告</el-button>
      <el-button v-if="bgFile==1" type="primary" @click="download"><i class="el-icon-loading"></i>报告正在生成</el-button>
      <el-button v-if="bgFile==2" type="primary" @click="download2">重新生成报告</el-button>
      <el-button v-if="bgFile==2" type="primary" @click="download">下载报告</el-button>

      <el-button type="primary" @click="getYwlog" style="margin-right: 100px">查看日志</el-button>
      <el-button v-if="ywzt == '申请作废'" type="danger" @click="del">作废</el-button>
      <el-button type="primary" @click="delsource">退回</el-button>
      <el-button v-if="ywzt == '待审核'" type="primary" @click="agree()">通过</el-button>
      <el-button v-if="ywzt == '已通过'" type="primary">已通过</el-button>

      <el-popover placement="bottom" trigger="hover" width="400">
        <el-steps :space="200" :active="ywztStepsActive" finish-status="success" process-status="finish">
          <el-step v-for="item in ywztsteps" key="item" :title="item"></el-step>
        </el-steps>
        <el-button slot="reference" type="success" style="margin-right: 100px">业务状态</el-button>
      </el-popover>

      <el-dialog v-dialogDrag :visible="dialogVisible" title="退回" @close="dialogClose"
                 :close-on-click-modal="false" width="50%">
        <div style="overflow: hidden;">
          <el-input type="textarea" :rows="2" v-model="mes" placeholder="退回原因"></el-input>
          <div style="margin-top:15px">
            <el-button type="primary" @click="submit(false)">确定</el-button>
            <el-button @click="dialogClose">取消</el-button>
          </div>
        </div>

      </el-dialog>
      <el-dialog v-dialogDrag :visible="money" title="收款金额" @close="dialogClose" :close-on-click-modal="false"
                 width="30%">
        <div style="height:100px">
                    <span>合计：<input type="text" class="skje" v-model="text" disabled>
                    </span><br>
          <el-button type="primary" @click="submit(true)">确定</el-button>
          <el-button @click="dialogClose">取消</el-button>
        </div>
      </el-dialog>

      <!--   日志   -->
      <el-dialog v-dialogDrag :visible="ywlogDialogVisible" title="日志" @close="dialogClose"
                 :close-on-click-modal="true" width="40%">
        <div style="height: 600px;overflow: auto">
          <el-timeline style="margin-left: 10px">
            <el-timeline-item v-for="(log,index) in ywlogs" :timestamp="log.createTime" placement="top"
                              :color="log.color" size="large" :icon="log.icon">
              <el-card>
                <h4 style="color: #909399">{{ log.title }}<span style="color: #F56C6C"
                                                                v-if="log.msg">（ 原因： {{ log.msg }} ）</span></h4>
                <p style="margin-top: 10px;color: #909399">
                  <i class="el-icon-user" style="margin-right: 10px;width: 20px"></i>{{ log.userName }}
                  <span style="margin-right: 20px"></span>职务：{{ log.role }}
                  <span style="margin-right: 20px"></span>电话：{{ log.phone }}
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-dialog>
    </div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

      <div style="width:100%;background-color:#fff;">
        <el-page-header @back="goback" content="业务列表">
        </el-page-header>
        <br>
        <div class="reason" v-if="ywzt == '申请作废' || ywzt == '已作废'">申请作废：{{ this.mes }}</div>
      </div>

      <el-tab-pane label="基本信息" name="first">
        <BasicInformation ref="Basic" :ywid="this.ywid" :ywzt="this.ywzt" @nextTab="first"></BasicInformation>
      </el-tab-pane>
      <el-tab-pane label="作业信息" name="second">
        <WorkInformation ref="Work" :ywId="this.ywid" :ywzt="this.ywzt" @nextTab="second"></WorkInformation>
      </el-tab-pane>
      <el-tab-pane label="损失清单" name="third">
        <LossList ref="Loss" :ywid="this.ywid" :ywzt="this.ywzt" @nextTab="third"></LossList>
      </el-tab-pane>
      <!-- <el-tab-pane label="残值清单" name="fourth">
          <ResidualValueList ref="Residual" :ywid="this.ywid"  @nextTab="fourth">
          </ResidualValueList>
      </el-tab-pane> -->
      <el-tab-pane label="影像上传" name="fourth">
        <ImageUpload ref="Image" :ywid="this.ywid" :ywzt="this.ywzt" :imgWidth="imgWidth"
                     @nextTab="fourth"></ImageUpload>
      </el-tab-pane>
    </el-tabs>

    <el-dialog v-dialogDrag :visible="setTemplateVisible" title="选择模板" @close="dialogClose"
               :close-on-click-modal="true" width="40%">
      <vxe-table
        round
        stripe
        border
        align="center"

        :data="templates">
        <vxe-column field="fileViewName" title="模板"></vxe-column>
        <vxe-column field="cru" width="200" title="创建人"></vxe-column>

        <vxe-column width="100" title="操作">
          <template #default="{ row, rowIndex  }">
            <el-button type="primary" @click="selectTemplate(row)">选择</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-dialog>

  </div>

</template>
<script>
import BasicInformation from './../basicInformation/basicInformation.vue';
import WorkInformation from './../workInformation/workInformation.vue';
import LossList from './../lossList/lossList.vue';
import ImageUpload from './../imageUpload/imageUpload.vue';
import ResidualValueList from './../residualValueList/residualValueList.vue';
import {audit, zf, selectById, getYwztCode, getYwlog} from '@/api/evaluation/newBusiness'
import {createBg2, reCreate} from "@/api/evaluation/verify";
import {getByCompany, getById, setTemplate} from "@/api/template/template";

export default {
  components: {BasicInformation, WorkInformation, LossList, ImageUpload, ResidualValueList},
  props: {
    ywid: {
      type: Number
    },
    ywzt: {
      type: String
    },
    bgFile: {
      type: Number
    },
    templateId: {
      type: Number
    },
    ywlx: {
      type: String
    },
  },
  watch: {
    ywid(newvalue) {
      this.ywid = newvalue
      this.activeName = "first"
    }
  },
  data() {
    return {
      user: localStorage.getItem('role'),
      goBack: '< 业务列表',
      // step: 3,
      activeName: "first",
      dialogVisible: false,
      money: false,
      mes: '',
      skje: '',
      text: '',
      imgWidth: 0,

      ywzt: '',
      ywztStepsActive: 0,
      ywztsteps: ["编辑", "审核", "结算", "完成"],
      ywlogs: {},
      ywlogDialogVisible : false,

      setTemplateVisible: false,
      templateName: '默认模板',
      templates: []
    };
  },
  methods: {
    divWidth() {
      this.imgWidth = this.$refs.widthFather.offsetWidth
      //console.log('ssss', this.imgHeight)
    },
    download() {
      // window.location.href = '/api/jdcpg/yw/cspgBg?ywid=' + this.ywid + '&type=pdf&download=true'
      // this.setTemplateVisible = true
      this.bgFile = 1
      createBg2('ywid=' + this.ywid + '&type=pdf&' + "recreate=false").then(
        (res) => {
          if (res.data == null) {
            this.$message({
              message: '报告正在生成',
              type: 'warning'
            })
          } else {
            window.open(res.data)
          }
        })
    },
    download2() {
      //reCreate('ywid=' + this.ywid)
      this.bgFile = 1
      createBg2('ywid=' + this.ywid + '&type=pdf&' + "recreate=true").then(
        (res) => {
          if (res.data == null) {
            this.$message({
              message: '报告正在生成',
              type: 'warning'
            })
          } else {
            window.open(res.data)
          }
        })
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
    first() {
      this.activeName = "second"
    },
    second() {
      this.activeName = "third"
    },
    third() {
      this.activeName = "fourth"
    },
    fourth() {
      this.activeName = "third"
    },
    dialogClose() {
      this.dialogVisible = false
      this.money = false
      this.setTemplateVisible = false
      this.ywlogDialogVisible = false
    },
    delsource() {
      this.dialogVisible = true
    },
    agree() {
      this.money = true
    },
    submit(value) {
      let obj = {}
      obj.ywid = this.ywid
      obj.result = value
      obj.skje = this.skje
      if (value) {
        obj.msg = ''
      } else {
        obj.msg = this.mes
      }
      audit(obj).then((res) => {
        if (value) {
          this.money = false
          this.$message.success('已通过！')

        } else {
          this.money = false
          this.$message.success('已退回！')

        }
        this.$emit('getList')
      })
    },
    del() {
      zf('ywid=' + this.ywid).then((res) => {
        alert('该业务已作废')
        this.$emit('getList')
      })
    },
    gettest() {
      selectById('id=' + this.ywid).then((res) => {
        if (res.data.jcxx.skje == 0) {
          this.text = '2000元'
          this.skje = 2000
        } else {
          this.skje = res.data.jcxx.skje
          this.text = this.skje + '元'
        }

        if (this.ywzt == '已退回') {
          this.mes = res.data.jcxx.thyy
        } else if (this.ywzt == '申请作废') {
          this.mes = res.data.jcxx.zfyy
        } else if (this.ywzt == '已作废') {
          this.mes = res.data.jcxx.zfyy
        }
      })
    },
    goback() {
      this.dialogClose()
      this.$emit('getList')
    },
    gettype() {
      selectById('id=' + this.ywid).then((res) => {
        // this.ywzt = res.data.jcxx.ywzt
        if (this.ywzt == '已退回') {
          // this.step = 5
          this.mes = res.data.jcxx.thyy
        } else if (this.ywzt == '申请作废') {
          // this.step = 6
          this.mes = res.data.jcxx.zfyy
        } else if (this.ywzt == '已作废') {
          // this.step = 7
          this.mes = res.data.jcxx.zfyy
        }
      })
    },
    setYwztActive() {
      getYwztCode('ywid=' + this.ywid).then((res) => {
        this.ywztStepsActive = res.data
      })
    },
    getYwlog() {
      this.ywlogDialogVisible = true
      getYwlog("ywid=" + this.ywid).then((res) => {
        this.ywlogs = res.data
      })
    },
    getTemplate() {
      if (this.templateId == null || this.templateId == 0) {
        this.templateName = '默认模板'
      } else {
        getById("id=" + this.templateId).then(
          (res) => {
            this.templateName = res.data.fileViewName
          }
        )
      }
    },
    setTemplate() {
      this.setTemplateVisible = true
      getByCompany("ywlx=" + this.ywlx).then(
        (res) => {
          this.templates = res.data
        }
      )
    },
    selectTemplate(row){
      setTemplate("templateId=" + row.id + "&ywid=" + this.ywid)

      this.getTemplate()
      this.setTemplateVisible = false
    }
  },

  mounted() {
    // this.gettest()
    this.divWidth()
  },
  activated() {
    this.gettest()

    this.gettype()
    this.setYwztActive()
    this.getTemplate()
  }
};
</script>
<style lang="less" scoped>
.reason {
  width: 80%;
  margin: 20px auto;
  // border: 1px solid gray;
  // padding: 5px;
  font-size: 13px;
  color: #606266;
}

.el-button--medium {
  float: right;
  margin-left: 10px;
  position: relative;
  z-index: 999;
}

:deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  font-size: 16px;
}

:deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #2EB3FF;
}

.skje {
  color: #606266;
  background-color: #fff;
  padding: 10px;
  border: none;
}

/deep/ .el-page-header__title {
  font-size: 14px;
}

/deep/ .el-page-header__content {
  font-size: 15px;
  font-weight: 500;
}
</style>
